<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            弹性盒子
            flex-direction: 设置主轴; 
                column y轴上下
                column-reverse y轴下上
                row x轴 左右 默认值
                row-reverse x轴 右左

            justify-content: 主轴方向的对齐方式;
                flex-start 在开始位置排列
                center 居中
                flex-end 在结束位置排列
                space-around 设置每个子标签左右两边间距一样
                space-between 两段对齐 子标签与子标签之间间距一样
            align-items :设置交叉轴单行的对齐方式
                flex-start 在开始位置排列
                center 居中
                flex-end 在结束位置排列
            align-content 设置交叉轴多行对齐方式
                flex-start 在开始位置排列
                center 居中
                flex-end 在结束位置排列
                space-around 设置每个子标签左右两边间距一样
                space-between 两段对齐 子标签与子标签之间间距一样
                stretch设置子标签没有设置高度时,设置高度撑开
        */
        ul{
            border: 1px solid #f00;
            display: flex;
            height: 200px;
            flex-direction: row;
            /* justify-content: space-between; */
            /* 换行 */
            flex-wrap: wrap;
            /* 基线对齐 */
            /* align-items: baseline; */

            /* align-content: stretch; */
            

            
        }
        li{
            border: 1px solid #000;
            /* height: 30px; */
            width: 110px;

            /* 设置当父标签剩余宽度不足时 设置子标签根据子标签个数进行比例缩小 */
            flex-shrink: 1;
            /* 设置当父标签剩余宽度充足时 设置子标签根据子标签个数进行比例扩大 */
            flex-grow: 0;

        }
        li:first-child{
            /* height: 100px; */
            flex-shrink: 0;
            flex-grow: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是li01</li>
        <li>这是li02</li>
        <li>这是li03</li>
        <li>这是li04</li>
        <li>这是li05</li>
        <li>这是li06</li>
        <li>这是li07</li>
        <li>这是li08</li>
        <li>这是li09</li>
        <li>这是li10</li>
        <li>这是li01</li>
        <li>这是li02</li>
        <li>这是li03</li>
        <li>这是li04</li>
        <li>这是li05</li>
        <li>这是li06</li>
        <li>这是li07</li>
        <li>这是li08</li>
        <li>这是li09</li>
        <li>这是li10</li>
    </ul>
</body>
</html>